<template>
  <ul>
    <li v-for="(item, index) in navEl" :key="index"
      @mouseenter="$emit('mouseenterHandler', item.children)"
      @mouseleave="$emit('mouseleaveHandler')"
    >
      <router-link class="nav-link" to="/">{{ item.type }}</router-link>
    </li>
  </ul>
</template>
<script setup lang="ts">


  const navEl = [
    {
      type: '服务',
      link: '/',
      active: false,
      children: [
        {
          type: '云服务',
          path: '/cloud-services'
        },
        {
          type: '咨询服务',
          path: '/consulting-services'
        },
        {
          type: '人力资源解决方案',
          path: '/human-resource-solutions'
        },
        {
          type: '大数据',
          path: '/big-data'
        },
        {
          type: '应用开发',
          path: '/application-development'
        },
        {
          type: '管理服务',
          path: '/management-services'
        },
        {
          type: '产品工程',
             path: '/product-engineering'
        },
        {
          type: '测试服务',
          path: '/testing-services'
        },
        {
          type: '软件平台',
          path: '/software-platforms'
        },
        {
          type: '数据库专业服务',
          path: '/database-professional-services'
        }
      ]
    },
    {
      type: '行业',
      link: '/about',
      active: false,
      children: [
        {
          type: '电信',
          path: '/telecom'
        },
        {
          type: '公共事业',
          path: '/public-sector'
        },
        {
          type: '高科技',
          path: '/high-tech'
        },
        {
          type: '互联网',
          path: '/internet'
        },
        {
          type: '零售业',
          path: '/retail'
        },
        {
          type: '金融',
          path: '/finance'
        },
        {
          type: '数字化金融',
          path: '/digital-finance'
        },
        {
          type: '流通',
          path: '/transportation'
        },
        {
          type: '房地产',
          path: '/real-estate'
        },
        {
          type: '能源',
          path: '/energy'
        },
        {
          type: '制造',
          path: '/manufacturing'
        },
        {
          type: '智能制造',
          path: '/intelligent-manufacturing'
        },
        {
          type: '政府',
          path: '/government'
        },
        {
          type: '云集',
          path: '/cloud-collect'
        },
        {
          type: '鸿联联创营',
          path: '/hulian-union-creation'
        }
      ]
    },
    {
      type: '解放号',
      link: '/services',
      active: false,
      children: []
    },
    {
      type: '教育培训',
      link: '/blog',
      active: false,
      children: []
    },
    {
      type: '关于我们',
      link: '/contact',
      active: false,
      children: []
    },
    {
      type: '加入我们',
      link: '/contact',
      active: false,
      children: [
        {
          type: '招贤纳士',
          path: '/join-us'
        },
        {
          type: '联系我们',
          path: '/contact'
        }
      ]
    }
  ]

</script>


<style scoped>

  ul {
    list-style: none;

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    li {

      min-width: 90px;

      .nav-link {
        font-size: 20px;
        display: block;
        line-height: 72px;
        height: 70px;
        width: 100%;
        text-align: center;

        position: relative;
      }

      .nav-link:hover {
        color: #733;
      }

      .nav-link::before {
        position: absolute;
        bottom: 0;

        content: "";
        display: block;
        width: 0;
        height: 2px;
        background-color: #733;

      }

      .nav-link:hover::before {
        content: "";
        width: 100%;
        transition: all 0.3s ease-in-out;
      }

    }
  }


</style>
